<template>
  <div class="Footerbox">
    <!-- 标题 -->
    <div class="Footer_title">
      <ul>
        <li>
          <a href="#">
            <em class="icon"><i class="el-icon-setting"></i></em>
            预约维修服务
          </a>
        </li>
        <li>
          <a href="#">
            <em class="icon"><i class="el-icon-sort"></i></em>
            7天无理由退货
          </a>
        </li>
        <li>
          <a href="#">
            <em class="icon"><i class="el-icon-refresh"></i></em>
            15天免费换货
          </a>
        </li>

        <li>
          <a href="#">
            <em class="icon"><i class="el-icon-present"></i></em>
            满69包邮
          </a>
        </li>

        <li>
          <a href="#">
            <em class="icon"><i class="el-icon-location-outline"></i></em>
            1100家售后网点
          </a>
        </li>
      </ul>
    </div>
    <!-- 链接 -->
    <div class="footer-links">
      <dl class="col_link">
        <dt></dt>
      </dl>
      <!-- 选购指南 -->
      <dl class="col_link">
        <dt>选购指南</dt>
        <dd><a href="#">手机</a></dd>
        <dd><a href="#">电视</a></dd>
        <dd><a href="#">笔记本</a></dd>
        <dd><a href="#">平板</a></dd>
        <dd><a href="#">穿戴</a></dd>
        <dd><a href="#">耳机</a></dd>
        <dd><a href="#">家电</a></dd>
        <dd><a href="#">路由器</a></dd>
        <dd><a href="#">音箱</a></dd>
        <dd><a href="#">配件</a></dd>
      </dl>

    <!-- 服务中心 -->
      <dl class="col_link">
        <dt>服务中心</dt>
        <dd><a href="#">申请售后</a></dd>
        <dd><a href="#">售后政策</a></dd>
        <dd><a href="#">维修服务价格</a></dd>
        <dd><a href="#">订单查询</a></dd>
        <dd><a href="#">以旧换新</a></dd>
        <dd><a href="#">保障服务</a></dd>
        <dd><a href="#">线下门店</a></dd>
        <dd><a href="#">小米之家</a></dd>
        <dd><a href="#">服务网点</a></dd>
        <dd><a href="#">授权体验店/专区</a></dd>
      </dl>

      <!-- 线下门店 -->
      <dl class="col_link">
        <dt>线下门店</dt>
        <dd><a href="#">小米之家</a></dd>
        <dd><a href="#">服务网点</a></dd>
        <dd><a href="#">授权体验店/专区</a></dd>
      </dl>

      <!--关于小米  -->
      <dl class="col_link">
        <dt>关于小米</dt>
        <dd><a href="#">了解小米</a></dd>
        <dd><a href="#">加入小米</a></dd>
        <dd><a href="#">投资者关系</a></dd>
        <dd><a href="#">环境，社会及管治</a></dd>
        <dd><a href="#">廉洁举报</a></dd>
      </dl>

    <!-- 关注我们 -->
      <dl class="col_link">
        <dt>关于小米</dt>
        <dd><a href="#">新浪微博</a></dd>
        <dd><a href="#">官方微信</a></dd>
        <dd><a href="#">联系我们</a></dd>
        <dd><a href="#">公益基金会</a></dd>
      </dl>

      <div class="col-contact">
        <p class="phone">400-100-5678</p>
        <p>8:00-18:00　(仅收市话费)</p>
        <a href="#">
             人工客服 
        </a>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Footer",
};
</script>

<style scoped>
.Footerbox {
  margin: auto;
  width: 1266px;
  height: 467px;
}
.Footerbox .Footer_title {
  height: 26px;
  padding: 27px 0;
}
.Footer_title ul li {
  float: left;
  width: 19.8%;
  height: 25px;
  border-left: 1px solid #e0e0e0;
  font-size: 16px;
  line-height: 25px;
  text-align: center;
}
.Footer_title ul li::after {
  content: "";
  clear: both;
}
.Footer_title ul li a {
  color: #616161;
}

.Footer_title ul li a:hover{
    color: #ff6700;
}

.Footer_title .icon {
  margin-right: 6px;
  font-size: 24px;
  line-height: 24px;
  vertical-align: -4px;
}

.footer-links {
  padding: 40px 0;
  height: 380px;
}

.footer-links .col_link {
  float: left;
  width: 160px;
  margin: 0;
}

.footer-links dt {
  margin: -1px 0 26px;
  font-size: 14px;
  line-height: 1.25;
  color: #424242;
}

.footer-links dd a {
  font-size: 12px;
  color: #757575;
}
.footer-links dd a:hover{
    text-decoration: underline;
    color: #ff6700;
}
.col-contact{
    float: right;
    width: 251px;
    border-left: 1px solid #e0e0e0;
    text-align: center;
    color: #616161;
}
.col-contact .phone{
    font-size: 22px;
    line-height: 1;
    color: #ff6700;
}
.col-contact p{
        margin: 0 0 5px 0;
    font-size: 12px;
}
.col-contact a{
    display: inline-block;
    width: 118px;
    height: 28px;
    font-size: 12px;
    line-height: 28px;
    border:1px solid #ff6700;
    background:#fff;
    cursor: pointer;
    color: #ff6700;
}
.col-contact a:hover{
    color:white;
    background-color: #ff6700;
}
</style>
